<template>
  <div class="box">
  </div>
</template>

<script>
// 学习目的：体验投影规律
import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 一。创建三维场景对象Scene
const scene = new THREE.Scene();
// scene.background = new THREE.Color('#aaaaaa');
// 给场景加物体
// 1.定义物体的形状：长方体 width height depth【深度】
const geometry = new THREE.BoxGeometry(50, 50, 50);
// 2.定义物体的材质：颜色（统一颜色）
const mesbasic=new THREE.MeshBasicMaterial({
    color: 0xFFC0CB,
    transparent: true,//开启透明
    opacity: 0.5,//设置透明度
}); //基础网格材质【不受光照影响】
 let mesh=null;
// 为每个面创建不同的材质
// const materials = [
//     new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 }), // 右面 - 红色
//     new THREE.MeshBasicMaterial({ color: 0x00ff00 , transparent: true, opacity: 0.5 }), // 左面 - 绿色
//     new THREE.MeshBasicMaterial({ color: 0x0000ff  , transparent: true, opacity: 0.5}), // 上面 - 蓝色
//     new THREE.MeshBasicMaterial({ color: 0xffff00 , transparent: true, opacity: 0.5 }), // 下面 - 黄色
//     new THREE.MeshBasicMaterial({ color: 0xff00ff  , transparent: true, opacity: 0.5}), // 前面 - 紫色
//     new THREE.MeshBasicMaterial({ color: 0x00ffff , transparent: true, opacity: 0.5 })  // 后面 - 青色
//   ];
// 3.创建一个网格模型，用于表示生活中的物体
// const mesh=new THREE.Mesh(geometry, mesbasic);
// 3.3 设置物体相对于场景中的位置 (疑问：设置这个位置是需要注意什么吗，是随意还是按照规则？)(疑问2：默认值0 0 0具体是在哪个位置从哪里能看出来？【可以用生活中的例子来讲一下这里】)
// mesh.position.set(0, 0, 0);//表示对象局部位置。默认值为(0, 0, 0)。
// 4.将物体放到场景中
// scene.add(mesh);


// new 1 模拟阵列沿着x轴阵列
// for (let i = 0; i < 10; i++) {
//     mesh=new THREE.Mesh(geometry, mesbasic); //网格模型对象Mesh
//     // 沿着x轴分布
//     mesh.position.set(i*250,0,0);
//     scene.add(mesh); //网格模型添加到场景中
// }
// new 2 模拟阵列沿着xz轴阵列
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    mesh=new THREE.Mesh(geometry, mesbasic); //网格模型对象Mesh
    // 沿着x轴分布
    mesh.position.set(i*100,0,j*100);
    scene.add(mesh); //网格模型添加到场景中
  }
}
// 添加辅助线
const axesHelper = new THREE.AxesHelper(200);
axesHelper.setColors(0xff0000, 0x00ff00, 0x0000ff);
scene.add( axesHelper );
let W=window.innerWidth;
let H=window.innerHeight;
// 二。创建相机 （相机是3D场景中用于观察的“眼睛”）[角度, 宽高比, 截取距离的最近距离, 截取距离的最远距离]（疑问：这个相机是在场景里面还是外面？）
const camera=new THREE.PerspectiveCamera(45, W / H, 0.1, 4000);
// 两个坐标连成一条线（就是视线）
// 相机的摆放位置
camera.position.set(2000, 2050, 2050);
// 相机的目标视线
camera.lookAt( 500, 0, 500 );


// 三。 渲染器(类似于咔拍照动作)
const render=new THREE.WebGLRenderer();
render.setSize(W, H);
render.render(scene, camera);
console.log('render.domElement',render.domElement);
// document.body.appendChild(render.domElement);

// 涉及到旋转 缩放 移动 则需要引入轨道控制器
const controls = new OrbitControls( camera, render.domElement );
// 注意他的目标要和lookAt一致不然会影响到lookAt的值
controls.target.set( 500, 0, 500 );
function animate() {
	requestAnimationFrame( animate );
	controls.update();
	render.render( scene, camera );
}
animate()
// 
export default{
  mounted() {
    document.querySelector('.box').appendChild(render.domElement);
  },
  beforeDestroy() {
 if (render &&render.domElement) {
      render.dispose();
    }
  },
}
</script>
<style scoped>
</style>